<script setup lang="ts">
import {useRouter} from "vue-router";


/////////
import {onMounted, ref} from 'vue';
import {useRoute} from "vue-router";
import teamAxios from "../plugins/teamAxios.ts";
import {teamStatusEnum} from "../constants/team.ts";
import pdx from "../assets/pdx.png"
import {getCurrentUser} from "../services/user.ts";
import {showToast} from "vant";
import {teamType} from "../model/team";
import {userType} from "../model/user";

const route = useRoute();
const router = useRouter();
const teamList = ref<teamType[]>([]);
onMounted(async () => {
  const res = await teamAxios.get('/list')
  // @ts-ignore
  if (res?.code === 200 && res.data) {
    console.log("list成功")
    teamList.value = res.data;
  } else {
    console.log("list失败")
  }
})

console.log(route);

////////
const doJoinTeam = async (id: number) => {
  const res = await teamAxios.post("/join", {
    id: id
  })
  // @ts-ignore
  if (res?.code === 200 && res.data) {
    console.log("加入成功")
    const res = await teamAxios.get('/list')
    // @ts-ignore
    if (res?.code === 200 && res.data) {
      console.log("list成功")
      showToast('加入成功');
      teamList.value = res.data;
    } else {
      console.log("list失败")
    }
  } else {
    console.log("加入失败")
    showToast('加入失败');
  }
}

///搜索
const searchText = ref('');
const onSearch = async () => {
  const res = await teamAxios.get('/list', {
    params: {
      teamName: searchText.value
    }
  })
  // @ts-ignore
  if (res?.code === 200 && res.data) {
    console.log("list成功")
    teamList.value = res.data;
  } else {
    console.log("list失败")
  }
};
const onCancel = async () => {
  const res = await teamAxios.get('/list')
  // @ts-ignore
  if (res?.code === 200 && res.data) {
    console.log("list成功")
    teamList.value = res.data;
  } else {
    console.log("list失败")
  }
}

const user = ref<userType>();
onMounted(async () => {
  const res = await getCurrentUser();
  // @ts-ignore
  if (res.code === 200 && res.data !== null) {
    user.value = res.data
  }

})
///圆窗
const show = ref(false);
const showPopup = (teamId: number) => {
  show.value = true;
  addTeamData.value.id = teamId;

};

const initFormData = {
  "teamPassword": "",
  id: 0

}
//表单
const addTeamData = ref({...initFormData});
const onSubmit = async () => {
  const postData = {
    ...addTeamData.value,
  }

//发送请求

  const res = await teamAxios.post("/join", postData, {withCredentials: true})
  // @ts-ignore
  if (res?.code === 200 && res.data) {
    console.log("添加成功")
    show.value = false;
    router.push({
      path: '/team',
      replace: true,
    });
  } else {
    console.log("添加失败")
  }
}
</script>

<template>
  <form action="/" style="padding-top: 46px">
    <van-search
        v-model="searchText"
        show-action
        placeholder="请输入要搜索的队伍"
        @search="onSearch"
        @cancel="onCancel"

    />
  </form>
  <van-card
      v-for="team in teamList"
      :thumb="pdx"
      :title="team.teamName"
      :desc="team.teamDescription"
  >
    <template #tags>
      <van-tag plain type="primary" style="margin-right: 4px">{{ teamStatusEnum[team.teamStatus] }}</van-tag>
    </template>
    <template #bottom>
      <div>
        {{ `队伍人数:0/${team.teamMaxnumber}` }}
      </div>
      <div v-if="team.teamExpiretime">
        {{ '过期时间: ' + team.teamExpiretime }}
      </div>
      <div>
        {{ '创建时间: ' + team.createTime }}
      </div>
    </template>
    <template #footer>
      <van-button v-if="team.teamStatus===0&&team.userId != user?.id" @click="doJoinTeam(team.id)" size="mini">加入队伍</van-button>
      <van-button v-if="team.teamStatus===2&&team.userId != user?.id" @click="showPopup(team.id)" size="mini">加入队伍</van-button>
    </template>
  </van-card>
  <van-divider>小主，已经到底了</van-divider>
  <van-empty style="padding-top: 106px" v-if="teamList.length<1" description="结果为空"/>
  <van-popup
      v-model:show="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
  >
    <van-form @submit="onSubmit" style="padding-top: 30px">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.teamPassword"
            name="teamPassword"
            label="邀请码"
            placeholder="请填写12位邀请码"
            :rules="[{ required: true, message: '请填写12位邀请码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </van-popup>

</template>

<style scoped>

</style>